<template>
    <div class="casting">
      <div class="casting-wrap">
        <div class="casting-header">
          <p>铸造</p>
          <!-- <img src="@/assets/img/close.png" @click="hidden()" /> -->
        </div>
        <div class="castingInfo">
          <div class="div-box">
            <div class="div-tit">1.DAW铸造信息设置</div>
            <ul>
              <li>
                <span class="span">DAW denom 名称：</span>
                <el-select
                  v-model="denomName"
                  placeholder="请选择denom名称"
                  @change="denomNameSelect(denomName)"
                >
                  <el-option
                    v-for="item in denomNameList"
                    :key="item.value"
                    :label="item.denomName"
                    :value="item.denomId"
                  />
                </el-select>
              </li>
              <li>
                <span class="span">DAW denom ID：</span>
                <el-input v-model="denomId" disabled />
              </li>
              <li>
                <span class="span">DAW名称：</span>
                <el-input v-model="dawName" @blur="dawNameblur" placeholder="请输入DAW名称" />
              </li>
              <li>
                <span class="span">Tokens前缀：</span>
                <el-input v-model="dawUri" placeholder="请输入DAW名称" />
              </li>
            </ul>
          </div>
          <div class="div-box">
            <div class="div-tit">2,DAW铸造设置</div>
            <ul>
              <li>
                <span class="span">铸造模式：</span>
                <el-select
                  v-model="castingSelect"
                  placeholder="请选择"
                  @change="castingChange(castingSelect)"
                >
                  <el-option
                    v-for="item in castingStatus"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </li>
              <li>
                <span class="span">铸造数量：</span>
                <el-input
                  v-model="num"
                  :disabled="numDisabled"
                  placeholder="请输入铸造数量"
                />
              </li>
            </ul>
          </div>
          <div class="castingButton">
            <el-button class="cancel" @click="cancel">取消</el-button>
            <el-button class="confirm" @click="confirm" :loading="loading">铸造</el-button>
          </div>
        </div>
      </div>
  
      <!-- 源文件选择弹窗 -->
      <Source v-if="sourceShow" @hidden="sourceHidden" @sendmsg="getmsg" />
    </div>
  </template>
  
  <script>
  // import * as api from "@/api/product/attr";
  import Source from "./Source";
  export default {
    name: "Casting",
    components: {
      Source,
    },
    data() {
      return {
        num: "",
        numDisabled: false,
        isUrl: false,
        isSource: false,
        loading: false,
        choose: "源文件选择",
        castingStatus: [
          {
            value: "1",
            label: "一对一",
          },
          {
            value: "2",
            label: "一对多",
          },
          {
            value: "3",
            label: "多对多",
          },
        ],
        castingSelect: "",
        denomName: "",
        denomNameList: [],
        denomId: "",
        dawName: "",
        dawNameList: [],
        castingVal: "",
        sourceShow: false, //源文件选择弹窗,
        dawUri: "", //url地址
        dawUriType: "", //类型
      };
    },
    created() {
      this.$http({
          url: this.$http.adornUrl(`/admin/nftdenom/getdenom`),
          method: 'get',
      }).then(({ data }) => {
          console.log(555,data)
          // this.dataList = data.records
          // this.page.total = data.total
          // this.dataListLoading = false
      })
    },
    methods: {
      //校验名称
      dawNameblur(){
        this.$http({
            url: this.$http.adornUrl(`/admin/nftdaw/checkDawName?dawName=${this.dawName}`),
            method: 'get',
        }).then(({ data }) => {
            console.log(555,data)
            // if(res.msg=="名称已存在"){
            //   this.dawName = "";
            // }
        })
      },
  
  
      getmsg(fileType, filePath) {
        this.isUrl = true;
        this.isSource = true;
        this.choose = "重新选择";
        this.dawUriType = fileType;
        this.dawUri = filePath;
      },
  
      hidden() {
        // 通过$emit引用组件传过来的hidden()事件
        this.$emit("hidden");
      },
  
      // 获取下拉的值
      denomNameSelect(denomId) {
        this.denomId = denomId;
      },
  
      dawNameClick() {
        this.$http({
            url: this.$http.adornUrl(`/admin/nftnamedaw/getNamedaw?denomId=${this.denomId}`),
            method: 'get',
        }).then(({ data }) => {
            console.log(555,data)
            // if(res.msg=="名称已存在"){
            //   this.dawName = "";
            // }
        })
      },
  
      //源文件选择点击
      onSource() {
        this.sourceShow = true;
      },
      //点击关闭源文件选择弹窗
      sourceHidden() {
        this.sourceShow = false;
      },
  
      // 铸造模式
      castingChange(value) {
        if (value == 1) {
          this.num = 1;
          this.numDisabled = true;
        } else {
          this.numDisabled = false;
        }
        this.castingVal = value;
      },
  
      // 取消
      cancel() {
        this.$emit("hidden");
      },
      confirm() {
        if(this.denomName==""){
          this.$message({
            type: 'info',
            message: '请选择denom名称'
          })
          return false
        }else if(this.dawName==""){
          this.$message({
            type: 'info',
            message: '请输入DAW名称'
          })
          return false
        }else if(this.dawUri==""){
          this.$message({
            type: 'info',
            message: '请选择源文件'
          })
          return false
        }else if(this.castingSelect==""){
          this.$message({
            type: 'info',
            message: '请选择铸造模式'
          })
          return false
        }else if(this.num==""){
          this.$message({
            type: 'info',
            message: '请输入铸造数量'
          })
          return false
        }else if(this.num<1){
          this.$message({
              type: 'info',
              message: '数量不能小于1'
            })
            return false;
        }else if(this.castingSelect==2){
          if(this.num>200){
            this.$message({
              type: 'info',
              message: '请限制铸造数量,最多不能超过200'
            })
            this.num = 200;
            return false;
          }else{
            this.loading = true;
            this.$http({
              url: this.$http.adornUrl(`/admin/nftdaw/insetNft`),
              method: 'post',
              data: this.$http.adornData({
                dawUri: this.dawUri, //url地址
                dawUriType: this.dawUriType, //类型
                dawName: this.dawName, // daw名称
                denomId: this.denomId, // DAW denomID
                dawType: this.castingSelect, //模式
                num: this.num // 数量
              })
            }).then(({ data }) => {
              console.log(55,data)
              // this.$message({
              //   message: this.$i18n.t('publics.operation'),
              //   type: 'success',
              //   duration: 1500,
              //   onClose: () => {
              //     this.dataForm.reapplyReason = ''
              //     this.visible = false
              //     this.$emit('refreshDataList')
              //   }
              // })
            })
            setTimeout(()=>{ this.$emit('hidden') },2000)
          }
        }else{
          this.loading = true;
          this.$http({
              url: this.$http.adornUrl(`/admin/nftdaw/insetNft`),
              method: 'post',
              data: this.$http.adornData({
                dawUri: this.dawUri, //url地址
                dawUriType: this.dawUriType, //类型
                dawName: this.dawName, // daw名称
                denomId: this.denomId, // DAW denomID
                dawType: this.castingSelect, //模式
                num: this.num // 数量
              })
          }).then(({ data }) => {
              console.log(55,data)
              // this.$message({
              //   message: this.$i18n.t('publics.operation'),
              //   type: 'success',
              //   duration: 1500,
              //   onClose: () => {
              //     this.dataForm.reapplyReason = ''
              //     this.visible = false
              //     this.$emit('refreshDataList')
              //   }
              // })
          })
          setTimeout(()=>{ this.$emit('hidden')},2000)
        }
      },
    },
  };
  </script>
  
  <style scoped>
  li {
    list-style: none;
  }
  .casting {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2002;
  }
  .casting-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 600px;
    background: #fff;
  }
  .casting-header {
    position: relative;
    height: 50px;
    background: rgb(243, 243, 243);
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 30px;
  }
  .casting-header p {
    padding-left: 5px;
    margin-bottom: 0;
    border-left: 4px solid rgb(26, 188, 156);
  }
  .casting-header img {
    position: absolute;
    right: 0;
    width: 40px;
    height: 40px;
    padding: 10px;
    cursor: pointer;
  }
  .castingInfo {
    position: absolute;
    top: 12%;
    left: 48%;
    transform: translate(-50%, 0%);
  }
  .castingInfo .div-box .div-tit {
    position: relative;
    width: 150px;
    line-height: 30px;
    color: #fff;
    text-align: center;
    font-size: 15px;
    background: rgba(158, 167, 180);
  }
  .el-input--medium .el-input__inner {
    width: 220px;
  }
  .castingInfo .div-box .div-tit::after {
    content: "";
    position: absolute;
    top: 0;
    right: -30px;
    border-style: solid;
    border-width: 15px 15px 15px 15px;
    border-color: transparent;
    border-left-color: rgba(158, 167, 180);
    width: 0px;
    height: 0px;
  }
  .div-box ul {
    margin-top: 20px;
  }
  .div-box ul li {
    position: relative;
    margin-top: 20px;
    font-size: 15px;
    color: #666;
    display: flex;
    align-items: center;
  }
  .div-box ul li:first-child {
    margin-top: 0;
  }
  .castingInfo .div-box ul li .span {
    position: relative;
    display: inline-block;
    width: 140px;
    font-size: 13px;
    text-align: center;
  }
  .castingInfo .div-box:first-child ul li:nth-child(1) .span::before {
    content: "*";
    position: absolute;
    top: -2px;
    left: -0px;
    color: red;
    font-size: 20px;
  }
  .castingInfo .div-box:first-child ul li:nth-child(2) .span::before {
    content: "*";
    position: absolute;
    top: -2px;
    left: 7px;
    color: red;
    font-size: 20px;
  }
  .castingInfo .div-box:first-child ul li:nth-child(3) .span::before {
    content: "*";
    position: absolute;
    top: -2px;
    left: 23px;
    color: red;
    font-size: 20px;
  }
  .castingInfo .div-box:first-child ul li:nth-child(4) .span::before {
    content: "*";
    position: absolute;
    top: -2px;
    left: 18px;
    color: red;
    font-size: 20px;
  }
  .castingInfo .div-box:nth-child(2) ul li:nth-child(1) .span::before {
    content: "*";
    position: absolute;
    top: -2px;
    left: 23px;
    color: red;
    font-size: 20px;
  }
  .castingInfo .div-box:nth-child(2) ul li:nth-child(2) .span::before {
    content: "*";
    position: absolute;
    top: -2px;
    left: 23px;
    color: red;
    font-size: 20px;
  }
  
  .castingInfo .div-box ul li >>> .el-input {
    width: 250px;
  }
  
  .castingButton {
    text-align: center;
    margin-top: 50px;
  }
  .castingButton button {
    width: 120px;
    margin: 0 10px;
  }
  .castingButton button:first-child {
    color: #1890ff;
    border-color: #1890ff;
  }
  .castingButton button:last-child {
    color: #fff;
    background: #1890ff;
  }
  .el-input__suffix {
    right: -80px;
  }
  .sourceFile {
    color: #fff;
    background: #1890ff;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
  }
  .sourceposition {
    position: absolute;
    right: -84px;
  }
  </style>
  